<script setup lang="ts">
import { MagicStick, DataAnalysis, Lock, Tools, Umbrella, Connection, Guide, Monitor } from '@element-plus/icons-vue'
import { ref, shallowRef } from 'vue'

const version = ref('3.6.5')
const features = ref([
	{
		icon: shallowRef(MagicStick),
		title: '快速开发',
		desc: '强大的一键生成功能，包括控制器、模型、视图、菜单等'
	},
	{
		icon: shallowRef(DataAnalysis),
		title: '多数据源',
		desc: '支持多数据源配置，简单配置即可实现切换'
	},
	{
		icon: shallowRef(Lock),
		title: '权限管理',
		desc: '支持按钮及数据权限，可自定义部门数据权限'
	},
	{
		icon: shallowRef(Tools),
		title: '组件封装',
		desc: '对常用js插件进行二次封装，使代码简洁易维护'
	},
	{
		icon: shallowRef(Umbrella),
		title: 'XSS防护',
		desc: '完善的XSS防范及脚本过滤，彻底杜绝XSS攻击'
	},
	{
		icon: shallowRef(Connection),
		title: '模块化',
		desc: 'Maven多项目依赖，模块松耦合，方便升级和扩展'
	},
	{
		icon: shallowRef(Guide),
		title: '国际化',
		desc: '支持国际化配置，服务端及客户端同时支持'
	},
	{
		icon: shallowRef(Monitor),
		title: '在线监控',
		desc: '实时监控服务器及应用状态，支持多维度监控'
	}
])

const functionColumns = ref([
	{
		prop: 'col1',
		label: '系统管理',
		width: ''
	},
	{
		prop: 'col2',
		label: '系统监控',
		width: ''
	},
	{
		prop: 'col3',
		label: '系统工具',
		width: ''
	},
	{
		prop: 'col4',
		label: '系统配置',
		width: ''
	}
])

const functionsTableData = ref([
	{
		col1: {
			name: '用户管理',
			icon: 'el-icon-user',
			desc: '用户是系统操作者，该功能主要完成系统用户配置'
		},
		col2: {
			name: '在线用户',
			icon: 'el-icon-user-solid',
			desc: '当前系统中活跃用户状态监控'
		},
		col3: {
			name: '代码生成',
			icon: 'el-icon-document',
			desc: '前后端代码的生成（java、html、xml、sql)支持CRUD下载'
		},
		col4: {
			name: '参数管理',
			icon: 'el-icon-setting',
			desc: '对系统动态配置常用参数'
		}
	},
	{
		col1: {
			name: '角色管理',
			icon: 'el-icon-s-check',
			desc: '角色菜单权限分配、设置角色按机构进行数据范围权限划分'
		},
		col2: {
			name: '服务监控',
			icon: 'el-icon-monitor',
			desc: '监视当前系统CPU、内存、磁盘、堆栈等相关信息'
		},
		col3: {
			name: '系统接口',
			icon: 'el-icon-connection',
			desc: '根据业务代码自动生成相关的api接口文档'
		},
		col4: {
			name: '字典管理',
			icon: 'el-icon-collection',
			desc: '对系统中经常使用的一些较为固定的数据进行维护'
		}
	},
	{
		col1: {
			name: '菜单管理',
			icon: 'el-icon-menu',
			desc: '配置系统菜单，操作权限，按钮权限标识等'
		},
		col2: {
			name: '定时任务',
			icon: 'el-icon-timer',
			desc: '在线（添加、修改、删除)任务调度包含执行结果日志'
		},
		col3: {
			name: '在线构建器',
			icon: 'el-icon-magic-stick',
			desc: '拖动表单元素生成相应的HTML代码'
		},
		col4: {
			name: '通知公告',
			icon: 'el-icon-bell',
			desc: '系统通知公告信息发布维护'
		}
	},
	{
		col1: {
			name: '部门管理',
			icon: 'el-icon-office-building',
			desc: '配置系统组织机构（公司、部门、小组），树结构展现支持数据权限'
		},
		col2: {
			name: '数据监控',
			icon: 'el-icon-data-analysis',
			desc: '监视当期系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈'
		},
		col3: {
			name: '表单构建',
			icon: 'el-icon-edit',
			desc: '拖拽表单元素生成相应的HTML代码'
		},
		col4: {
			name: '岗位管理',
			icon: 'el-icon-position',
			desc: '配置系统用户所属担任职务'
		}
	}
])
</script>

<template>
	<div class="home">
		<!-- 项目介绍卡片 -->
		<el-card
			class="intro-card"
			shadow="hover"
		>
			<div class="intro-section">
				<h2><i class="el-icon-info" /> 项目介绍</h2>
				<div class="intro-content">
					<p>
						YXHN-Cloud 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Cloud &
						Alibaba、Vue、Element），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源。
					</p>
					<div class="version-tag">
						<span class="label"><i class="el-icon-version-control" /> 当前版本:</span>
						<el-tag type="success">{{ version }}</el-tag>
					</div>
				</div>
			</div>
		</el-card>

		<!-- 技术架构图 -->
		<el-card
			class="arch-card"
			shadow="hover"
		>
			<h2><i class="el-icon-cpu" /> 技术架构</h2>
			<div class="architecture-diagram">
				<!-- 前端层 -->
				<div class="arch-layer frontend-layer">
					<div class="layer-title">前端层</div>
					<div class="tech-items">
						<div class="tech-item">
							<div class="tech-title">基础框架</div>
							<div class="tech-content">
								<el-tag size="small">Vue 3.x</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Pina
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									Vue Router
								</el-tag>
							</div>
						</div>
						<div class="tech-item">
							<div class="tech-title">UI框架</div>
							<div class="tech-content">
								<el-tag size="small">Element Plus</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Sass
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									Echarts
								</el-tag>
							</div>
						</div>
						<div class="tech-item">
							<div class="tech-title">工具库</div>
							<div class="tech-content">
								<el-tag size="small">Axios</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Moment.js
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									Wangeditor
								</el-tag>
							</div>
						</div>
					</div>
				</div>

				<!-- 微服务层 -->
				<div class="arch-layer service-layer">
					<div class="layer-title">微服务层</div>
					<div class="tech-items">
						<div class="tech-item">
							<div class="tech-title">微服务框架</div>
							<div class="tech-content">
								<el-tag size="small">Spring Cloud</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Spring Boot
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									Nacos
								</el-tag>
							</div>
						</div>
						<div class="tech-item">
							<div class="tech-title">服务治理</div>
							<div class="tech-content">
								<el-tag size="small">Sentinel</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Gateway
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									OpenFeign
								</el-tag>
							</div>
						</div>
					</div>
				</div>

				<!-- 持久层 -->
				<div class="arch-layer data-layer">
					<div class="layer-title">持久层</div>
					<div class="tech-items">
						<div class="tech-item">
							<div class="tech-title">数据库</div>
							<div class="tech-content">
								<el-tag size="small">DM8</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Redis
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									MongoDB
								</el-tag>
							</div>
						</div>
						<div class="tech-item">
							<div class="tech-title">数据访问</div>
							<div class="tech-content">
								<el-tag size="small">MyBatis-Plus</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Druid
								</el-tag>
							</div>
						</div>
					</div>
				</div>

				<!-- 基础设施层 -->
				<div class="arch-layer infra-layer">
					<div class="layer-title">基础设施层</div>
					<div class="tech-items">
						<div class="tech-item">
							<div class="tech-title">基础环境</div>
							<div class="tech-content">
								<el-tag size="small">Java EE 8</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									Maven
								</el-tag>
								<el-tag
									size="small"
									type="warning"
								>
									Docker
								</el-tag>
							</div>
						</div>
						<div class="tech-item">
							<div class="tech-title">存储服务</div>
							<div class="tech-content">
								<el-tag size="small">MinIO</el-tag>
								<el-tag
									size="small"
									type="success"
								>
									阿里OSS
								</el-tag>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-card>

		<el-divider>
			<i class="el-icon-star-on" />
		</el-divider>

		<!-- 特性和功能部分 -->
		<el-row :gutter="20">
			<el-col
				:sm="24"
				:lg="24"
			>
				<h2 class="section-title"><i class="el-icon-star-on" /> 主要特性</h2>
				<el-row
					:gutter="20"
					class="feature-grid"
				>
					<el-col
						v-for="(feature, index) in features"
						:key="index"
						:xs="12"
						:sm="8"
						:md="6"
						:lg="3"
					>
						<div class="feature-item">
							<div class="feature-icon">
								<el-icon><component :is="feature.icon" /></el-icon>
							</div>
							<div class="feature-title">{{ feature.title }}</div>
							<div class="feature-desc">{{ feature.desc }}</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<!-- 内置功能表格 -->
		<el-row
			:gutter="20"
			style="margin-top: 20px"
		>
			<el-col
				:sm="24"
				:lg="24"
			>
				<h2 class="section-title"><i class="el-icon-menu" /> 内置功能</h2>
				<el-table
					:data="functionsTableData"
					style="width: 100%"
					:header-cell-style="{
						background: '#f5f7fa',
						color: '#303133',
						fontWeight: 500
					}"
					border
				>
					<el-table-column
						v-for="(col, index) in functionColumns"
						:key="index"
						:prop="col.prop"
						:label="col.label"
						:width="col.width"
					>
						<template #default="scope">
							<div class="function-item">
								<i :class="scope.row[col.prop].icon" />
								<span class="function-name">{{ scope.row[col.prop].name }}</span>
								<el-tooltip
									v-if="scope.row[col.prop].desc"
									:content="scope.row[col.prop].desc"
									placement="top"
									effect="light"
								>
									<i class="el-icon-info function-info" />
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	</div>
</template>

<style scoped lang="scss">
.home {
	background-color: #f5f7fa;
	.intro-card,
	.arch-card {
		margin-bottom: 20px;
	}
	.intro-card {
		.intro-section {
			h2 {
				margin-bottom: 20px;
				color: #303133;
				i {
					margin-right: 8px;
					color: #409eff;
				}
			}
			.intro-content {
				line-height: 1.8;
				color: #606266;
				.version-tag {
					margin-top: 20px;
					.label {
						margin-right: 10px;
						font-weight: bold;
					}
				}
			}
		}
	}
	.arch-card {
		margin-bottom: 20px;
		h2 {
			margin-bottom: 20px;
			color: #303133;
			i {
				margin-right: 8px;
				color: #409eff;
			}
		}
	}
	.architecture-diagram {
		.arch-layer {
			position: relative;
			padding: 20px;
			margin-bottom: 20px;
			background: #f8f9fa;
			border-radius: 8px;
			transition: all 0.3s;
			&:hover {
				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
				transform: translateY(-2px);
			}
			.layer-title {
				padding-left: 10px;
				margin-bottom: 20px;
				font-size: 16px;
				font-weight: bold;
				color: #409eff;
				border-left: 3px solid #409eff;
			}
			.tech-items {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				.tech-item {
					flex: 1;
					min-width: 250px;
					padding: 15px;
					background: white;
					border-radius: 6px;
					box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
					.tech-title {
						padding-bottom: 8px;
						margin-bottom: 12px;
						font-size: 14px;
						color: #606266;
						border-bottom: 1px dashed #dcdfe6;
					}
					.tech-content {
						display: flex;
						flex-wrap: wrap;
						gap: 8px;
						.el-tag {
							height: 24px;
							padding: 0 8px;
							line-height: 22px;
							border-radius: 4px;
							&:hover {
								transition: all 0.3s;
								transform: translateY(-2px);
							}
						}
					}
				}
			}
		}
		.frontend-layer {
			background: #f0f9eb;
		}
		.service-layer {
			background: #f0f5ff;
		}
		.data-layer {
			background: #fdf6ec;
		}
		.infra-layer {
			background: #f4f4f5;
		}
	}
	.section-title {
		margin: 20px 0;
		font-size: 24px;
		font-weight: 500;
		color: #303133;
		i {
			margin-right: 8px;
			color: #409eff;
		}
	}
	.feature-grid {
		margin: 20px 0;
	}
	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		margin-bottom: 20px;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
		&:hover {
			transform: translateY(-5px);
			.feature-icon {
				background: #409eff;
				i {
					color: #ffffff;
				}
			}
		}
		.feature-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 80px;
			margin-bottom: 15px;
			background: #ecf5ff;
			border-radius: 50%;
			transition: all 0.3s;
			i {
				font-size: 30px;
				color: #409eff;
				transition: all 0.3s;
			}
		}
		.feature-title {
			margin-bottom: 10px;
			font-size: 16px;
			font-weight: 500;
			color: #303133;
		}
		.feature-desc {
			font-size: 13px;
			line-height: 1.5;
			color: #606266;
		}
	}
	.function-item {
		display: flex;
		align-items: center;
		padding: 8px 0;
		i {
			margin-right: 8px;
			font-size: 16px;
			color: #409eff;
			&.function-info {
				margin-left: 8px;
				font-size: 14px;
				color: #909399;
				cursor: pointer;
				&:hover {
					color: #409eff;
				}
			}
		}
		.function-name {
			font-size: 14px;
			color: #606266;
		}
	}

	// 表格样式优化
	.el-table {
		margin-top: 20px;
		overflow: hidden;
		border-radius: 4px;
		&::before {
			display: none;
		}
		.el-table__header {
			th {
				padding: 12px 0;
				font-weight: 500;
			}
		}
		.el-table__body {
			td {
				padding: 8px 0;
			}
		}

		// 鼠标悬浮效果
		.el-table__row {
			transition: all 0.3s;
			&:hover {
				background-color: #f5f7fa;
				.function-item {
					.function-name {
						color: #409eff;
					}
				}
			}
		}
	}
	.el-divider {
		margin: 30px 0;
		.el-icon-star-on {
			color: #409eff;
		}
	}
}
</style>
